<template>
  <formRender />
</template>

<script setup name="BwtForm" lang="jsx">
import { h, resolveDynamicComponent } from 'vue'
const props = defineProps({
  model: {
    type: Object,
    default: () => ({})
  },
  items: {
    type: Array,
    default: [],
  },
  inline: {
    type: Boolean,
    default: false,
  },
  labelPosition: {
    type: String,
    default: "right",
  },
  labelWidth: {
    type: String,
  },
  labelSuffix: {
    type: String,
  },
  hideRequiredAsterisk: {
    type: Boolean,
    default: false,
  },
  showMessage: {
    type: Boolean,
    default: true,
  },
  inlineMessage: {
    type: Boolean,
    default: false,
  },
  statusIcon: {
    type: Boolean,
    default: false,
  },
  validateOnRuleChange: {
    type: Boolean,
    default: true,
  },
  size: {
    type: String,
    default: "normal",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const bwtFormRef = ref(null);

function validate(...args) {
  return bwtFormRef.value.validate(...args);
}
function validateField(...args) {
  return bwtFormRef.value.validateField(...args);
}
function resetFields(...args) {
  return bwtFormRef.value.resetFields(...args);
}
function clearValidate(...args) {
  return bwtFormRef.value.clearValidate(...args);
}
function validateHandle(...args) {
  emit("validate", ...args);
}

const formRender = () => {
  const createElement =
    proxy.$parent && proxy.$parent.$createElement
      ? proxy.$parent.$createElement
      : h;
  return (
    <el-form
      ref={bwtFormRef}
      class="bwt-form"
      model={props.model}
      inline={props.inline}
      label-position={props.labelPosition}
      label-width={props.labelWidth}
      label-suffix={props.labelSuffix}
      hide-required-asterisk={props.hideRequiredAsterisk}
      show-message={props.showMessage}
      inline-message={props.inlineMessage}
      status-icon={props.statusIcon}
      validate-on-rule-change={props.validateOnRuleChange}
      // size={props.size}
      disabled={props.disabled}
      onValidate={validateHandle}
    >
      {props.items
        .filter((it) => !it.hidden)
        .map((item, index) => {
          const input = (val) => {
            props.model[item.key] = val
          };
          // 渲染控件
          const render = item.render
            ? item.render(createElement, {
                model: props.model,
                item,
                value: props.model[item.key],
                input,
              })
            : createElement(resolveDynamicComponent(item.tag), {
                modelValue: props.model[item.key],
                'onUpdate:modelValue': value => props.model[item.key] = value,
                ref: item.ref,
                ...item.attrs,
                ...item.props
              });
          return (
            <el-form-item
              key={index}
              prop={item.key}
              label={item.label}
              rules={item.rules}
            >
              {render}
            </el-form-item>
          );
        })}
    </el-form>
  );
};

defineExpose({
  validate,
  validateField,
  resetFields,
  clearValidate
})
</script>
